<template>
  <div class="qr">
    <el-row :gutter="2.5">
        <el-col :span="8" class="ec"  v-for="good, index in filteredGoods" :key="good.id" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '0px'}" shadow=hover>
                <transition name="fade">
                    <div class="buy" v-show="getBuyButton(good.id)" @mouseenter="enter(good.id)" @mouseleave="leave(good.id)">快速购买</div>
                </transition>
                <img :src="good.img[0]" class="image" @click="openDetail(good)" @mouseenter="enter(good.id)" @mouseleave="leave(good.id)">
                <div class="info">
                    <span>{{good.name}}</span>
                    <div class="bottom clearfix">
                        <time class="time" v-for="cat in good.catena" :key="cat">{{ cat }}&nbsp;&nbsp;</time>
                        <time class="price">￥{{ good.price }}</time>
                        <!-- <el-button class="button">操作按钮</el-button> -->
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import {goods} from '../../assets/data/exhibition.js'
import {mapState, mapMutations} from 'vuex'
export default {
    data:function() {
        return {
            // show:false
            showMap:[]
        }
    },
    methods:{
        enter:function(id){
          this.showMap.push(id)
        //   console.log(this.showMap);
        },
        leave:function(id){
            this.showMap.splice(this.showMap.find(function(ele){
              return ele.id === id
            }))
            // console.log(this.showMap);
        },
        getBuyButton:function(id){
            var ele =this.showMap.indexOf(id)
            if(ele!=-1) {
                // console.log(0);
                return true
            } 
            // console.log(1);
            return false
        },
        ...mapMutations(["openDetail"])
    },
    computed:{
        goods:()=>goods,
        goodsSize:function(){
            return this.goods.length
        },
        ...mapState({
            queryStr:'queryStr'
        }),
        // 计算属性，匹配搜索
        filteredGoods: function () {
            var articles_array = this.goods,
                searchString = this.queryStr;

            if(!searchString){
                return articles_array;
            }
 
            searchString = searchString.trim().toLowerCase();
 
            articles_array = articles_array.filter(function(item){
                if(item.name.toLowerCase().indexOf(searchString) !== -1){
                    return item;
                }
            })
            // 返回过滤后的数据
            return articles_array;
        }
    }
};
</script>

<style scoped>
.qr{
    width: 1000px;
    height: 2000px;
    position:absolute;
    top: 200px;
    left: 666px;
}
.ec{
    margin: 10px;
    width: 300px;
    cursor: pointer;
}
.buy{
    color: #fff;
    background: #d6000f;
    width: 120px;
    height: 50px;
    position: absolute;
    text-align: center;
    line-height: 50px;
    font-weight: 550;
    /* display: none; */
}
.buy:hover{
    display: block;
    cursor: pointer;
    background: #000;
}
.info{
    padding: 14px; 
    background: #f1f2ed;
}
.fade-enter-active, .fade-leave-active{
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
        opacity: 0;
    }
.time {
  font-size: 13px;
  color: #999;
}
.price{
    font-size: 13px;
    color: #d6000f;
    font-weight: bold;
    /* border: 1px solid red; */
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  /* position:absolute; */
}
/* .image:hover{

} */

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

<style scoped>
.el-card{ 
    position: relative;
    /* margin: 10px; */
    /* padding: 30px; */
    /* line-height: 100px; */

}
</style>